<template>
  <div class="name">
    <van-nav-bar
      title="修改昵称"
      left-text="返回"
      right-text="完成"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

    <div class="filed">
      <van-field
        v-model.trim="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="7"
        placeholder="请输入昵称"
        show-word-limit
      />
    </div>
  </div>
</template>

<script>
import { updateUserInfo } from '@/api/user'
export default {
  name: 'Name',
  components: {},
  props: {
    // name: {
    //   type: [String, Number]
    // },
    value: {
      type: [String, Number]
    }
  },
  data() {
    return {
      message: this.value || ''
    }
  },
  created() {},
  mounted() {},
  activited() {},
  update() {},
  beforeRouteUpdate() {},
  methods: {
    onClickLeft() {
      this.$emit('close')
    },
    onClickRight() {
      //  console.log(2)
      this.updateUserInfo()
    },

    // 更新昵称
    async updateUserInfo() {
      if (!this.message) {
        return this.$toast('不能为空')
      }
      if (this.value === this.message) {
        return this.$toast('昵称未改变')
      }
      try {
        await updateUserInfo({ name: this.message })
        // console.log(data)
        // 成功后 关闭弹窗 编辑不需清空输入框
        this.$emit('close')
        // 改变视图
        this.$emit('input', this.message)
      } catch (error) {
        this.$toast.fail('失败')
      }
    }
  },
  filter: {},
  computed: {},
  watch: {}
}
</script>

<style lang="less" scoped>
.filed {
  padding: 20px;
}
</style>
